<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: libowu
  Date: 18-10-19
  Time: 下午9:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <style type="text/css">
        body{
            background: white;
            color: black;
            padding-bottom: 20px;
        }

        a{
            cursor: pointer;
        }

        .container-fluid{
            padding: 0px;
        }

        .container-fluid .tableInfo{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .container-fluid .tableInfo .tableContent{
            height: auto;
            width: 100%;
            margin-top: 40px;
            overflow: hidden;
        }

        .container-fluid .tableInfo .limit{
            height:auto;
            width: 100%;
        }

        .alert{
            height: 400px;
            width: 400px;
            position: absolute;
            left: 38%;
            top: 27%;
            border-radius: 10px;
            padding: 0;
            overflow: hidden;
            display: none;
        }

        .alert .msg{
            height: 350px;
            text-align: center;
            align-content: center;
            width: 100%;
            background: #F0F0F0;
            border-radius: 10px 10px 0 0;
            line-height: 350px;
        }

        .alert .b{
            height: 50px;
            width: 100%;
            border-radius: 0 0 10px 10px;
            background: #2aabd2;
            display: flex;
        }

        .alert .b a{
            display: block;
            float: left;
            flex: 1;
            text-align: center;
            align-content: center;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            font-size: 20px;
            padding: 0;
            color: white;
        }

        .alert .b a:first-child{
            border-right: 1px rgba(0,0,0,0.3) solid;
        }

        .alert .b a:hover{
            background: #5bc0de;
        }

        a{
            text-decoration: none;
            margin-left: 20px;
        }

        .limit{
            width: 100%;
            text-align: center;
            align-content: center;
            height: auto;
        }

        .container-fluid .tableInfo .tableContent table{
            width: 100%;
            height: auto;
        }
        .container-fluid .tableInfo .tableContent table tr{
            width: 100%;
            display: block;
            height: 30px;
            display: flex;
            text-align: center;
            align-content: center;
            line-height: 30px;
            font-size: 10px;
        }
        .container-fluid .tableInfo .tableContent table .info:hover{
            background: #F0F0F0;
        }
        .container-fluid .tableInfo .tableContent table tr:last-child{
            border-bottom:  1px #F0F0F0 solid;
        }
        .container-fluid .tableInfo .tableContent table tr:first-child{
            font-weight: 700;
        }
        .container-fluid .tableInfo .tableContent table tr:nth-child(2n){
            background: #ffffff;
        }
        .container-fluid .tableInfo .tableContent table tr:nth-child(2n-1){
            background: #ffffff;
        }
        td{
            display: block;
            float: left;
            border-right: 1px #F0F0F0 solid;
            border-top: 1px #F0F0F0 solid;
        }
        td:nth-child(1){
            width: 60px;
        }
        td:nth-child(2){
            flex: 1;
        }
        td:nth-child(3){
            flex: 1;
        }
        td:nth-child(4){
            flex: 1;
        }
        td:nth-child(5){
            flex: 1;
        }
        td:nth-child(6){
            flex: 1;
        }
        td:first-child{
            border-left:1px #F0F0F0 solid;
        }

        .fu-phone-ui{
            width: 100%;
            background: #2A89B3;
        }

        .fu-phone-ui:hover{
            background: #2A89B3;
        }

        .fu-phone-ui .fu-phone-title{
            width: 100%;
            height: 40px;
            padding-left: 20px;
            line-height: 40px;
            color: white;
        }


    </style>
</head>

<script type="text/javascript">
    /**
     *
     * @param url:跳转地址
     * @param type:类型，next为上一页，previous为下一页
     * @param page：当前页码
     * @param allPage：所有页数
     */
    function change(url,type,page,allPage) {
        //控制上一页下一页不出现越界的情况
        var previous=document.getElementById("previous")
        var next=document.getElementById("next");
        if (type=='previous' && page-1>=1){
            previous.href=url+"?"+"page="+(page-1);
        }else if (type=='next' && page+1<=allPage){
            next.href=url+"?"+"page="+(page+1);
        }
    }
</script>
<body>
<div class="container-fluid">
    <div class="tableInfo" id="futer_body">
        <div class="tableContent .table-responsive d-none d-lg-block">
            <table>
                <tr class="info">
                    <td class="" align="center"><input type="checkbox"/></td>
                    <td align="center">名称</td>
                    <td align="center">时间</td>
                    <td align="center">类型</td>
                    <td align="center">操作</td>
                </tr>

                <c:if test="${allApp!=null}">
                    <c:forEach items="${allApp}" var="sh">
                        <tr class="info">
                            <td align="center"><input type="checkbox"/></td>
                            <td>${sh.appname}</td>
                            <td><f:formatDate value="${sh.createdate}" type="both" dateStyle="long"/></td>
                            <td>${sh.type}</td>
                            <td align="left">
                                <a href="/futer/appEdit?name=${sh.appname}" style="color: #0F7BFF;">详情</a>
                                <c:if test="${sh.desktop==0}">
                                    <a onclick="desktop('${sh.appname}',${sh.id},this)" style="color: #0F7BFF;">添加到桌面</a>
                                </c:if>
                                <c:if test="${sh.desktop!=0}">
                                    <a onclick="desktop('${sh.appname}',${sh.id},this)" style="color: #0F7BFF;">从桌面移除</a>
                                </c:if>
                                <c:if test="${sh.type!='system'}">
                                    <a onclick="remove('${sh.appname}')" style="color: #0F7BFF;">删除 </a>
                                </c:if>
                            </td>
                        </tr>
                    </c:forEach>
                </c:if>
            </table>
        </div>

        <div class="d-lg-none" style="width: 100%;">
            <c:if test="${allApp!=null}">
                <c:forEach items="${allApp}" var="sh">
                    <div class="fu-phone-ui" onclick="sendToAppDetail('${sh.appname}')">
                        <div class="fu-phone-title">${sh.appname}</div>
                        <div style="width: 100%;height: 1px;background: #ccc;"></div>
                    </div>
                </c:forEach>
            </c:if>
        </div>


        <%--显示提示区域--%>
        <div class="alert" id="alert">
            <div class="msg" id="msg">
                是否确定删除？
            </div>
            <div class="b">
                <a id="yes" >是</a>
                <a id="no" >否</a>
            </div>
            <span id="optionType" hidden="hidden">购买</span>
        </div>

    </div>

    <script type="text/javascript">
        /*//设置页面样式
        (document.getElementById("futer_body")).style.backgroundColor='${config.bgforframe}';
        (document.getElementById("futer_body")).style.color='${config.fontcolor}';

        //修改当前页码按钮颜色
        var currentPageNum=document.getElementById("currentPageNum");
        currentPageNum.style.background='#B2B2B3';*/

        var al=document.getElementById("alert");
        var yes=document.getElementById("yes");
        var no=document.getElementById("no");

        //删除应用
        function remove(name) {
            al.style.display='block';
            yes.onclick=function (ev) {
                console.log("删除软件")
                al.style.display='none';

                var info = {
                    'appname': name,
                };
                $.ajax({
                    type: "post",
                    url: "/futer/removeApp",
                    data:JSON.stringify(info) ,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response, ifo) {

                        if (response=='请求被拒绝，无权限访问'){
                            window.parent.sengToLogin();
                            return;
                        }

                        if (response>=1){
                            window.location.href="/futer/appSetting?page=${currentPage}";
                            window.parent.reFreshApp("应用设置");
                        }else {
                            alert("删除失败");
                        }
                    }, error: function (err) {
                        alert("删除失败！");
                    }
                })
            }
            no.onclick=function (ev) {
                al.style.display='none';
            }
        }


        //添加应用到桌面或桌面面移除
        function desktop(name,id,obj) {
            var optionType;
            if (obj.innerText=="添加到桌面") {
                optionType = 'add';
                obj.innerText = '从桌面移除';
            }else {
                optionType = 'remove';
                obj.innerText = '添加到桌面';
            }
            var info = {
                'name': name,
                'type':optionType,
                'id':id
            };
            $.ajax({
                type: "post",
                url: "/futer/desktop",
                data:JSON.stringify(info) ,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response, ifo) {

                    if (response=='请求被拒绝，无权限访问'){
                        parent.sengToLogin();
                        return;
                    }

                    if (response>=1){
                        window.parent.reFreshApp("应用设置",optionType);
                    }else {
                        alert("删除失败");
                    }
                }, error: function (err) {
                    alert("删除失败！");
                }
            })
        }

        if ('${login}'=='login'){
            parent.sengToLogin();
        }

        function sendToAppDetail(name) {
            window.location = '/futer/appEdit?name='+name;
        }
    </script>
</div>
</body>
</html>
